<template>
  <div>
    <h1>App</h1>
    <!-- 
      插槽 slot：父子组件通信，通信的内容带数据的标签

        1. 默认插槽
          - 父组件给子组件传递标签数据
            <Child>
              xxx
            </Child>

          - 子组件使用
            <slot />

        2. 具名/命名插槽


        3. 作用域插槽

    -->
    <A>
      <!-- 
        通信插槽数据
        默认插槽
      -->
      <p>hello child111</p>
      <div>hello child222</div>
      <p>hello child333</p>
    </A>

    <hr />

    <B>
      <!-- 具名插槽 -->
      <!-- template相当于react中Fragment，用来充当根标签，不会渲染成DOM -->
      <template v-slot:header>
        <header>child header</header>
      </template>
      <template v-slot:content>
        <p>child content111</p>
        <p>child content222</p>
        <p>child content333</p>
      </template>
      <template #footer>
        <footer>child footer</footer>
      </template>
    </B>

    <hr />

    <C>
      <!-- 
        优先使用默认插槽，
        如果有结构要渲染到不同位置，才考虑具名插槽
       -->
      <!-- 具名插槽 -->
      <template v-slot:header>
        <header>child header</header>
      </template>

      <!-- 默认插槽 -->
      <p>child content111</p>
      <p>child content222</p>
      <p>child content333</p>

      <!-- 具名插槽 -->
      <template #footer>
        <footer>child footer</footer>
      </template>
    </C>

    <hr />

    <D>
      <!-- 
        作用域插槽：
          通过v-slot指令的值来接受，子组件给父组件插槽传递数据 
      -->
      <template v-slot:header="{ age }">
        <p>child header {{ age }}</p>
      </template>

      <template v-slot="scoped">
        <p>child content {{ count }}</p>
        <p>child content {{ scoped.sex }}</p>
        <p>child content {{ scoped.age }}</p>
      </template>

      <template #footer="{ age }">
        <p>child footer {{ age }}</p>
      </template>
    </D>
  </div>
</template>

<script>
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";
import D from "./D.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    A,
    B,
    C,
    D,
  },
};
</script>

<style></style>
